<template>
	<view>
		<view class="c-box" id="postDemand">
			<view v-show="showDemand">
				<view style="background-color: white">
					<view class="demandStepList">
						<view class="demandStep">
							<view class="item-span">需求产品<view style="color: red">*</view>
							</view>
							<view
								style="position: relative; width: 644rpx; background-color: #F7F7F7; height: 104rpx; padding: 20rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;">
								<textarea style="width: 94%; height: 100%; position: absolute; top: 0; "
									placeholder="请输入需求产品" rows="8" cols="18" v-model="title" type="text" />
								<text class="cwpos" v-show="is_cw.a"
									style="position: absolute; bottom: 0;  left: 20rpx;">
									请输入需求产品
								</text>
							</view>
						</view>
					</view>
					<view class="demandStep">
						<view>具体参数<view style="color: red;">*</view>
						</view>
						<view
							style="position: relative; width: 644rpx; background-color: #F7F7F7; height: 104rpx; padding: 20rpx; border-radius: 12rpx 12rpx 12rpx 12rpx;">
							<textarea style="width: 94%; height: 100%; position: absolute; top: 0; "
								placeholder="请输入具体参数" rows="8" cols="18" v-model="content" type="text" />
							<text class="cwpos" v-show="is_cw.b" style="position: absolute; bottom: 0; left: 20rpx;">
								请输入具体参数
							</text>
						</view>
					</view>
					<view class="demandClassify" style="border: 1px solid white;">
						<view class="addText">采购数量</view>
						<uni-number-box :min="1" @change="NumberBox"></uni-number-box>
					</view>
					<view class="demandClassify" style="position: relative;">
						<view class="addText">
							采购预算
							<view style="color: red;">*</view>
						</view>
						<view @click="inputDialogToggle" v-if="dialogValue == ''"
							style="width: 100%; text-align: right; padding-right: 25rpx; color:#A1A0A0;">
							请输入
						</view>
						<view v-else @click="inputDialogToggle"
							style="width: 100%; text-align: right; padding-right: 25rpx; color:#2E2D2D;">
							{{dialogValue}}
						</view>
						<text class="cwpos" style="position: absolute; bottom: 0 ; right: 25rpx;"
							v-show="is_cw.c">请输入采购预算</text>
					</view>
					<view class="demandClassify" style="display: flex; align-items: center; position: relative;">
						<view class="addText">
							供应商区域
							<view style="color: red;">*</view>
						</view>
						<view @click="openPicker()" style="width: 100%; text-align: right; ">
							<text style="margin-right: 10rpx; line-height: 30rpx; color: #A1A0A0;"
								v-if="addressData.address == ''">请选择</text>
							<text style="margin-right: 10rpx; line-height: 30rpx; color: #2E2D2D;"
								v-else>{{addressData.address}}</text>
							<image v-if="addressData.address == ''" class="addIcon"
								style="padding-left: 0; padding-top: 0; vertical-align: middle;"
								src="https://m.nocexpo.com/statics/js/modules/h5/img/icon20.png" />
						</view>
						<text class="cwpos" style="position: absolute; bottom: 0; right: 25rpx;"
							v-show="is_cw.d">选择供应商区域</text>
					</view>
					<view class="demandClassify" @click="toTag" style="position: relative;">
						<view class="addText">添加标签<view style="color: red;">*</view>
						</view>
						<view class="" style="display: flex; align-items: center;">
							<text style="margin-right: 10rpx; line-height: 30rpx; color: #A1A0A0;">请选择</text>
							<image class="addIcon" style="padding-left: 0; padding-top: 0; vertical-align: middle;"
								src="https://m.nocexpo.com/statics/js/modules/h5/img/icon20.png" />
						</view>
						<text class="cwpos" style="position: absolute; bottom: 0; right: 25rpx;"
							v-show="is_cw.e">请添加标签</text>
					</view>
					<view class="tagList">
						<view class="tag-item" v-for="item in useTagList">
							<view class="tag-text">{{item.tagName}}</view>
						</view>
					</view>
					<view class="demandClassify">
						<view class="addText">是否公开电话</view>
					</view>
					<view>
						<radio-group @change="publicPhone" class="phoneRadio form-radio_wrap">
							<label class="radio">
								<radio value="1" :checked="ifPhone == '1'" />是
							</label>

							<label class="radio">
								<radio style="margin-left: 80rpx;" value="0" :checked="ifPhone == '0'" />否
							</label>
						</radio-group>
					</view>
					<!-- 上传图片 -->
					<view class="demandStep">
						<view>参考图片<view style="color: #A1A0A0">（最多可上传4张图片）</view>
					</view>
						<input type="file" style="display: none" ref="uploadImg"
							accept="image/gif, image/jpeg, image/jpg, image/png, image/svg" multiple id="uploadImg"
							class="uploadImg" @change="uploadImg()" />
					<view class="img-item-box">
						<image v-for="(item,index) in news.imgList" :src="item" class="img-item"
							@click="ifDeleteImg(index)" style="">
						<image src="../../../static/image/closeimage.png" class="caba"></image>
							</image>
						<image v-if="news.imgList.length<=3" class="addImg"
								:src="imgUrl + '/statics/js/modules/applet/img/zhaopianfengmian.png'" @click="clickUpload()" />
						</view>
					</view>
				</view>
				<view style="display: flex;justify-content: center;margin-top: 120rpx">
					<view class="uploadbutton" style="display:flex;justify-content: center;align-items: center;"
						:loading="releaseLoading" :disabled="releaseLoading" @click="release()">确定发布</view>
				</view>
				<view class="c-h120"></view>
			</view>
			<!-- 标签详情页-->
			<view v-show="showTag" style="background-color: white">
				<view style="padding-top: 0.3rem;">
					<view class="sort" style="padding-bottom:0rpx;">
						<view class="sort-ul">
							<view
								style=" width: 100%;font-size: 30rpx;margin-bottom: 38rpx; color: #2E2D2D; font-weight: 500;">
								已选标签(可以多选)</view>
							<view v-if="useTagList.length==0" style="height: 200rpx;">
							</view>
							<view v-else>
								<view class="sort-li" v-for="item in useTagList">
									<view class="sort-aa" href="javascript:void(0);">{{'#'+ item.tagName}}
										<p style="display: inline-block;" @click="delTag(item)">X</p>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="background-color: #f5f5f5; height: 2rpx;width: 90%; margin: 0 auto;"></view>
					<view style="display: block; ">
						<!-- <view style="margin-left: 30rpx;font-size: 30rpx;margin-top: 20rpx;">注：标签可以多选</view> -->
						<view class="sort" style="padding-top: 48rpx;display: block;">
							<view style="width: 100%;font-size: 30rpx;color: #2E2D2D; font-weight: 500;">推荐标签</view>
							<view class="sort-ul">
								<view class="sort-li" v-for="item in recomTagList">
									<view class="sort-a" :class="{active : index === ''}" href="javascript:void(0);"
										@click="userTag(item)">{{item.tagName}}</view>
								</view>
							</view>
						</view>
						<view style="display: flex; margin-top: 30rpx;">
							<input placeholder="自定义标签，不超过十个汉字" class="tagInput" v-model="tagName">
							<view class="tagAdd" @click="addTag">添加</view>
						</view>
						<view v-if="tagList.length>0">
							<view class="xlk">
								<view v-for="(item,i) in tagList" :key="item.id" style="width: 524rpx; height: 70rpx; padding-left: 14rpx;
							            background-color: #f5f5f5;line-height: 70rpx;" @click="useTagItem(item)">
									{{ item.tagName }}
								</view>
							</view>
						</view>
						
						
					</view>
					<view style="padding-top: 6rem;padding-bottom: 2rem;display: flex; justify-content: center;">
						<view class="back" @click="showTag = false;showDemand = true;">返回</view>
						<view class="tagSave" @click="returnDemand">确定</view>
					</view>
				</view>
			</view>
			<!-- 采购预算 -->
			<view>
				<uni-popup ref="inputDialog" type="dialog">
					<uni-popup-dialog ref="inputClose" mode="input" title="采购预算" @confirm="dialogInputConfirm">
						<view style="position: relative; display: flex;">
							<input type="number" class="ipt" v-model="left" @input="inpt" placeholder="最底价">
							<text style="font-size: 50rpx;margin: 0 10rpx; color: rgba(0,0,0,.2);">-</text>
							<input type="number" class="ipt" v-model="right" @input="inpt" placeholder="最高价">
							<view class="iptPos" v-if="is_left">
								{{leftvalue}}
							</view>
						</view>
					</uni-popup-dialog>
				</uni-popup>
			</view>
			<!-- 选区域 -->
			<view>
				<cc-selectDity :province="province" :city="city" :area="area" :show="show" @changeClick="changeClick"
					@sureSelectArea="onsetCity" @hideShow="onhideShow"></cc-selectDity>
			</view>
		</view>
	</view>
</template>

<script>
	import indexApi from '@/utils/request/index.js';
	import uploadApi from '@/api/uploadDemand.js';
	import commonApi from '@/utils/commonMethod.js';
	export default {
		data() {
			return {
				imgUrl: indexApi.baseUrl,
				classNameStr: [],
				originClassifyList: [],
				brandClassifyList: [],
				industryList: [],
				productAttrList: [],
				brandId: '',
				classId: '',
				industryId: '',
				originId: '',
				priceStart: '',
				priceEnd: '',
				productModel: '',
				productAttrId: [],
				productAttrVal: [],
				title: '',
				content: '',
				news: {
					imgList: [], //图片
				},
				showDemand: true,
				showTag: false,
				tagName: '',
				useTagList: [],
				tagList: [],
				addTagIsClick: true,
				recomTagList: [],
				ifPhone: 1,
				demandClassifyList: [], //需求分类
				demandClassifyId: '',
				load: false,
				releaseLoading: false,
				// 采购数量 
				quantity: '1',
				// 采购预算
				dialogValue: '',
				left: '',
				right: '',
				if_left: true,
				leftvalue: '',
				// 选区域
				show: false,
				province: "山东省",
				city: "青岛市",
				addressData: {
					address: '',
				},
				price: {
					start: "",
					end: ""
				},
				isShow: true,
				is_cw: {
					a: false,
					b: false,
					c: false,
					d: false,
					e: false,
				}
			};
		},
		onLoad() {
			this.getRecomTagList();
			this.getDemandClassify();
		},
		watch: {
			tagName() {
				if (this.tagName) {
					commonApi.getTagList(this.tagName).then(res => {
						this.tagList = res.data.page.list
					})
				}
			}
		},
		methods: {
			inpt(val) {
				console.log(this.left, this.right);
				if (this.left == '' || this.right == '') {
					this.is_left = true
					this.leftvalue = '价格不可为空'

				} else if (Number(this.left) > Number(this.right)) {
					this.is_left = true
					this.leftvalue = '最低价不得高于最高价'


				} else if (!Number(this.left) || !Number(this.right)) {
					this.is_left = true
					this.leftvalue = '请输入正确的价格'

				} else {
					this.is_left = false;
				}
			},
			// 采购数量 发生变化时
			NumberBox(res) {
				this.quantity = res
				console.log(this.quantity);
			},
			// 采购预算打开gai
			inputDialogToggle() {
				this.is_left = false;
				this.leftvalue = "";
				this.left = ''
				this.right = ''
				this.$refs.inputDialog.open();

			},
			dialogInputConfirm(val) {
				this.dialogValue = this.left + "元" + '-' + this.right + "元";
				this.price.start = this.left;
				this.price.end = this.right;
				this.$refs.inputDialog.close()
				this.left = ''
				this.right = ''
			},
			openPicker() {
				console.log('执行打开地址选择器')
				this.show = true
			},
			changeClick(value, value2) {
				console.log('地址选择器 = ' + value + value2);
				this.province = value;
				this.city = value2;
				this.area = value3;
			},
			onhideShow() {
				this.show = false
				console.log('执行了关闭地址选择器')
			},
			//选中省市区
			onsetCity(e) {
				console.log(e);
				let data = e.detail.target.dataset;
				let address = data.province + data.city + data.area;
				this.show = false
				this.addressData.address = address
			},

			publicPhone(e) {
				console.log(e.detail.value);
				this.ifPhone = e.detail.value
			},
			chooseClass(e) {
				console.log(e.detail.value);
				this.demandClassifyId = e.detail.value
			},
			//上传图片
			clickUpload() {

				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						var that = this

						let headers = {
							"token": uni.getStorageSync("authorize").token,
							cookie: uni.getStorageSync('cookie')
						};
						res.tempFilePaths.forEach((item, index, array) => {
							//上传
							uni.uploadFile({
								url: 'https://m.nocexpo.com/sys/oss/upload',
								filePath: item,
								name: 'file',
								header: headers,
								success: (res) => {
									let result = JSON.parse(res.data)
									if (result.code == 0) {
										console.log(result.url);
										that.news.imgList.push(result.url)
									}
								}
							})
						})

					}.bind(this)
				});
			},
			//微信上传咨询图片
			tailorNewsImg(img, canvas, ctx) {
				let _this = img
				// 创建属性节点
				var anw = document.createAttribute("width");
				anw.nodeValue = _this.width;
				var anh = document.createAttribute("height");
				anh.nodeValue = _this.height;
				canvas.setAttributeNode(anw);
				canvas.setAttributeNode(anh);
				ctx.drawImage(img, 0, 0, _this.width, _this.height);
				let finalDataURL = canvas.toDataURL("image/jpeg", 1.0);
				let finalFile = convertBase64UrlToBlob(finalDataURL)
				let compressFile = {
					urlFile: finalFile,
					fileName: "newsImg.jpg"
				};
				uploadNewsImg(compressFile)
			},
			uploadImg(el) {
				let fileList = el.target.files;
				if (fileList.length > 4 || fileList.length + this.news.imgList.length > 4) {
					layer.open({
						content: '图片最多只能选择4张！',
						btn: '确定'
					});
					return;
				}
				if (fileList.length > 0) {
					this.load = true;
				}
				Object.keys(fileList).forEach((value, index, array) => {
					//循环读取文件
					let fileReader = new FileReader();
					let img = new Image();
					fileReader.onload = (event) => {
						img.src = event.target.result
						img.onload = function() {
							// 旋转图片
							let newImage = rotateImage(img);
							newImage.name = fileList[value].name;
							imgCompress(newImage, {
								quality: 0.2
							}, uploadNewsImg)
						};
					}
					fileReader.readAsDataURL(fileList[value]);
				})
			},
			//是否删除图片
			ifDeleteImg(imgIndex) {
				const self = this

				uni.showModal({
					title: "",
					content: "是否删除照片?",
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							var that = this
							that.news.imgList.splice(imgIndex, 1)
							console.log('用户点击确定');

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}.bind(this)
				});
			},
			toTag() {
				this.showDemand = false;
				this.showTag = true;
			},
			returnDemand() {
				this.showDemand = true;
				this.showTag = false;
			},
			//标签
			getRecomTagList() {
				uploadApi.getRecomTagList().then(res => {
					this.recomTagList = res.data.page.list;
				})
			},
			addTag() {
				if (this.addTagIsClick) {
					this.addTagIsClick = false;
					this.tagName = this.tagName.trim()
					if (!this.tagName) {
						uni.showModal({
							title: "",
							content: "请填写标签名!",
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');

								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						this.addTagIsClick = true;
						return;
					}
					if(!commonApi.testTagName(this.tagName)){
						uni.showModal({
							title: "",
							content: "标签含有字符或空格！",
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						this.addTagIsClick = true;
						return;
					}
					uploadApi.saveTag(this.tagName).then(res => {

						uni.showModal({
							title: "",
							content: "添加成功!",
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');

								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

						let useItem = {
							id: res.data.nocTag.id,
							tagName: res.data.nocTag.tagName,
						}
						this.useTagList.push(useItem);
						this.tagName = '';

						this.addTagIsClick = true;
					})
				}
			},
			userTag(tagInfo) {
				//校验是否已使用
				for (let i = 0; i < this.useTagList.length; i++) {
					if (this.useTagList[i].id == tagInfo.id) {

						uni.showModal({
							title: "",
							content: "标签已选择",
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');

								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						return;
					}
				}
				let useItem = {
					id: tagInfo.id,
					tagName: tagInfo.tagName,
				}
				this.useTagList.push(useItem);
			},
			useTagItem(tagInfo) {
				this.userTag(tagInfo);
				this.tagName = '';
				this.tagList = [];
			},
			delTag(tagInfo) {
				uni.showModal({
					title: "",
					content: "确定删除？",
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							var that = this
							for (let i = 0; i < that.useTagList.length; i++) {
								if (that.useTagList[i].id == tagInfo.id) {
									that.useTagList.splice(i, 1);
									break;
								}
							}
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}.bind(this)
				});
			},
			release() {
				console.log("release方法");
				// this.releaseLoading = true;
				// const ifJudgedPhone = await judgeIfPhone()
				// if (!ifJudgedPhone) {
				// 	this.releaseLoading = false;
				// 	return
				// }
				// const result = await judgeNocuserUserInfo()
				// if (!result) {
				// 	this.releaseLoading = false;
				// 	return
				// }
			
				let title = this.title
				if (!title) {
					// uni.showModal({
					// 	title: "",
					// 	content: "请填写需求名称!",
					// 	showCancel:false,
					// 	success: function (res) {
					// 		if (res.confirm) {
					// 			console.log('用户点击确定');

					// 		} else if (res.cancel) {
					// 			console.log('用户点击取消');
					// 		}
					// 	}
					// });
					this.is_cw.a = true
					this.releaseLoading = false;
					return;
				} else {
					this.is_cw.a = false
				}
				let content = this.content;
				if (!content) {

					// uni.showModal({
					// 	title: "",
					// 	content: "请填写需求描述!",
					// 	showCancel:false,
					// 	success: function (res) {
					// 		if (res.confirm) {
					// 			console.log('用户点击确定');

					// 		} else if (res.cancel) {
					// 			console.log('用户点击取消');
					// 		}
					// 	}
					// });
					this.is_cw.b = true
					this.releaseLoading = false;
					return;
				} else {
					this.is_cw.b = false
				}

				if (this.dialogValue == '') {
					this.is_cw.c = true
					return;
				} else {
					this.is_cw.c = false
				}
				if (this.addressData.address == '') {
					this.is_cw.d = true
					return;
				} else {
					this.is_cw.d = false
				}
				let useTagList = this.useTagList
				if (useTagList.length == 0) {

					this.is_cw.e = true
					this.releaseLoading = false;
					return;
				} else {
					this.is_cw.e = false
				}
				console.log("save", this.priceStart, this.priceEnd);
				uploadApi.saveDemand(
					title, content, this.news.imgList, useTagList, this.ifPhone, this.demandClassifyId, this.quantity,
					this.addressData.address, this.price.start, this.price.end
				).then(res => {
					if (res.data.code == 0) {
						console.log(res);
						uni.showModal({
							title: "提示",
							content: "需求发布成功",
							showCancel: false,
							success: function(res) {
								this.releaseLoading = true;
								
								if (res.confirm) {
									console.log('用户点击确定')
									uni.redirectTo({
										url: '../../../pages/person/match'
									});
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						uni.showModal({
							title: "提示",
							content: "需求发布失败",
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
			},
			getDemandClassify() {
				uploadApi.getDemandClassify().then(res => {
					this.demandClassifyList = res.data.list
				})
			},

			getClassNameStr(classId) {
				uploadApi.getClassNameStr(classId).then(res => {
					this.classNameStr = res.data.classNameStr
				})
			},
			getOriginClassify() {
				uploadApi.getOriginClassify().then(res => {
					this.originClassifyList = res.data.list

				})
			},
			getBrandClssify() {
				uploadApi.getBrandClssify().then(res => {
					this.brandClassifyList = res.data.list
				})
			},
			getIndustry() {
				uploadApi.getIndustry().then(res => {
					this.industryList = res.data.list
				})
			},
			getProductAttrList(classId) {
				uploadApi.getProductAttrList(classId).then(res => {
					this.productAttrList = res.data.list
					for (let i = 0; i < this.productAttrList.length; i++) {
						this.productAttrId[i] = this.productAttrList[i].id
					}
				})
			},
			startMatch() {
				let title = this.title
				if (!title) {
					uni.showModal({
						title: "提示",
						content: "请填写标题",
						confirmrText: "我知道了",
						showCancel: false,
						success: function(res) {
								this.releaseLoading = true;
							if (res.confirm) {
								console.log('用户点击确定');

							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

					return;
				}
				let priceEnd = this.priceEnd
				if (!priceEnd) {

					uni.showModal({
						title: "提示",
						content: "请填写预算范围！",
						confirmrText: "我知道了",
						showCancel: false,
						success: function(res) {
								this.releaseLoading = true;
							
							if (res.confirm) {
								console.log('用户点击确定');

							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

					return;
				}
	
				let productAttrId = this.productAttrId
				let productAttrVal = this.productAttrVal
				if (productAttrId.length != productAttrVal.length) {

					uni.showModal({
						title: "提示",
						content: "请填写参数！",
						confirmrText: "我知道了",
						showCancel: false,
						success: function(res) {
								this.releaseLoading = true;
							if (res.confirm) {
								console.log('用户点击确定');

							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

					return;
				}
				uploadApi.saveDemand2(
					title, brandId, classId, industryId, originId, priceStart, priceEnd, productModel, productAttrId,
					productAttrVal
				).then(res => {
					if (res.data.code == 0) {
						window.location.href = "matchResult.html?demandId=" + res.data.demandId;
					} else {
						layer.alert(res.data.msg)
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep radio .wx-radio-input {
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
		border: 2rpx solid #A1A0A0;
		background: transparent;
	}

	::v-deep radio .wx-radio-input.wx-radio-input-checked {
		width: 35rpx;
		height: 35rpx;
		border: 2rpx solid #00AAA6;
		background-color: white !important;
		/*外圈边框与内圈实心圆间的内容的颜色，不设置就默认是上面的绿色*/
	}

	::v-deep radio .wx-radio-input.wx-radio-input-checked::before {
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
		/* 圆角 */
		width: 20rpx;
		/* 中后对勾大小，不要超过背景的尺寸 */
		height: 20rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		line-height: 20rpx;
		text-align: center;
		font-size: 0rpx;
		/* 对勾大小 30rpx */
		color: transparent;
		/* 对勾颜色 白色 */
		background: #00AAA6;
		transform: translate(-50%, -50%) scale(1);
	}


	.cwpos {
		/* position: absolute;
		bottom: 0; */
		font-size: 25rpx;
		color: red;
		margin: 0;
		padding: 0;
	}

	.ipt {
		border: 1rpx solid rgba(0, 0, 0, .1);
		border-radius: 10rpx;
		padding: 10rpx 10rpx;
		text-align: center;
	}

	.iptPos {
		color: red;
		font-size: 25rpx;
		position: absolute;
		bottom: -30rpx;
		left: 0;
	}

	.demandStepList .item {
		padding: 0 20rpx;
		background: #fff;
	}

	.demandStepList .item .item-span {
		float: left;
		// line-height: 100rpx;
		font-size: 28rpx;
		color: #000000;
		display: flex;

	}

	.demandStep {
		background: #fff;
		padding: 0 20rpx 0.4rem 20rpx;
	}

	.demandStep textarea {
		box-sizing: border-box;
		padding: 20rpx 20rpx 10rpx -10rpx;
		border: 0;
		background: #f5f5f5;
		font-size: 28rpx;
		line-height: 20px;
		height: 85% !important;
		top: 16rpx !important;
		width: auto;
		resize: none;
	}

	.demandStep>view {
		font-size: 28rpx;
		color: #000000;
		// line-height: 100rpx;
		display: flex;
		height: 84rpx;
		line-height: 84rpx;
	}

	.addImg {


		width: 155rpx;
		height: 155rpx;
		vertical-align: middle;

	}

	.addTag {
		margin: 0 20rpx;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		border-top: 1px solid gainsboro
	}

	.addText {
		font-size: 28rpx;
		color: #000000;
		line-height: 50rpx;
		width: 340rpx;
		display: flex;
	}

	.tagList {
		margin: 0 20rpx;
		/*display: flex;*/
		justify-content: center;
		align-items: center;
	}

	.tag-item {
		display: inline-block;
		justify-content: center;
		align-items: center;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		height: 30rpx;
		background-color: #E4F8F7;
		border-radius: 200rpx;
		padding: 10rpx 20rpx;
	}

	.tag-text {
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #00AAA6;
	}

	.addIcon {
		width: 14rpx;
		height: 26rpx;
		padding-top: 25rpx;
		padding-left: 500rpx;

	}

	.addPhone {
		margin: 0 20rpx;
		padding: 20rpx 0;
		justify-content: space-between;
		border-top: 1px solid gainsboro;

	}

	.phoneTest {
		font-size: 30rpx;
		color: #000000;
	}

	.phoneRadio {
		font-size: 28rpx;
		color: #2E2D2D;
		margin: 0 20rpx;

	}


	.img-item-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.caba {
		position: absolute;
		right: 0;
		top: 0;
		width: 28rpx;
		height: 28rpx;
		border-top-right-radius: 20rpx;
		background-color: #5F6066;
		color: #fff;
		text-align: center;
		line-height: 28rpx;
		font-size: 14rpx;
	}

	.img-item {
		border-radius: 20rpx;
		width: 155rpx;
		height: 155rpx;
		vertical-align: middle;
		margin: 10rpx;

		position: relative;
	}

	.sort {
		padding: 0 20rpx 0rpx 20rpx;
		background: #fff;
	}

	.sort h3 {
		font-size: 0.35rem;
		color: #333333;
		margin-bottom: 0.32rem;
		font: revert;
		font-weight: bold;
	}

	.sort .sort-ul {
		width: 100%;
		margin: 0 auto;
		margin-top: 38rpx;
		overflow: hidden;
	}

	.sort .sort-li {
		float: left;

		margin-right: 20rpx;

		padding: 8rpx 0rpx;
		// margin-bottom: 30rpx;
	}

	.sort .sort-a {
		display: inline-block;
		padding: 16rpx;
		/* height: 70rpx; */
		color: #A1A0A0;
		line-height: 1;
		border: 2rpx solid #DCDCDC;
		border-radius: 35rpx;
	}

	.sort .sort-aa,
	.active {
		background-color: #E4F8F7;
		color: #00AAA6;
		padding: 16rpx;
		border-radius: 200rpx;
		line-height: 1;
	}

	.tagInput {
		display: inline-block;
		border-radius: 35rpx;
		line-height: 70rpx;
		width: 524rpx;
		height: 68rpx;
		background-color: #f5f5f5;
		padding: 0 40rpx;
		margin-left: 20rpx;
		box-sizing: border-box;
	}

	.tagAdd {
		display: inline-block;
		margin-left: 20rpx;
		line-height: 68rpx;
		color: #FFFFFF;
		border-radius: 50rpx;
		text-align: center;
		font-size: 28rpx;
		width: 116rpx;
		height: 68rpx;
		background: linear-gradient(180deg, #54D6D2 0%, #00AAA6 100%);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
	}

	.tagSave {
		margin: 0 auto;
		width: 240rpx;
		height: 76rpx;
		background: linear-gradient(180deg, #54D6D2 0%, #00AAA6 100%);
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		font-weight: 600;
		font-size: 28rpx;
		line-height: 76rpx;
		color: #FFFFFF;
		text-align: center;
		position: relative;
		right: 40rpx;
	}

	.back {
		margin: 0 auto;
		width: 240rpx;
		height: 76rpx;
		background: #F2F3F5;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		font-weight: 600;
		font-size: 28rpx;
		line-height: 76rpx;
		color: #A1A0A0;
		text-align: center;
		position: relative;
		left: 40rpx;
	}

	.demand-input {
		/* margin-left: 0.16rem; */
		width: 100%;
		border: 0;
		font-size: 20rpx;
	}

	.demandClassify {
		margin: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 2rpx solid #F7F7F7;
		height: 112rpx;
		box-sizing: border-box;
	}

	.classify {
		margin: 0rem 0.4rem 0rem 0.4rem;
		justify-content: center;
		align-items: center;
	}

	.classify-radio {
		font-size: 25rpx;
		color: #000000;
		display: inline-block;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
		height: 30rpx;
		line-height: 30rpx;
	}

	.loader {
		position: relative;
		margin: 0 auto;
		width: 60px;
	}

	.loader:before {
		content: '';
		display: block;
		padding-top: 100%;
	}

	.circular {
		animation: rotate 2s linear infinite;
		height: 100%;
		transform-origin: center center;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	.path {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
		animation: dash 1.5s ease-in-out infinite,
			color 6s ease-in-out infinite;
		stroke-linecap: round;
	}

	.uploadbutton {
		line-height: 76rpx;
		text-align: center;
		color: #fff;
		display: block;
		margin: 0.1rem auto 0 auto;
		font-size: 35rpx;
		font-weight: bold;
		width: 658rpx;
		height: 76rpx;
		background: linear-gradient(180deg, #54D6D2 0%, #00AAA6 100%);
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		opacity: 1;
		position: relative;
		top: -40rpx;
	}
	.xlk{
		// border-top: 1px solid #dbdbdb;
		width: 524rpx;
		max-height: 350rpx;
		overflow-y: auto;
		height: 300rpx;
		margin-left: 26rpx;
		margin-top: 10rpx;
		border-radius: 12rpx;
	}

	@keyframes rotate {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -35px;
		}

		100% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -124px;
		}
	}

	@keyframes color {

		100%,
		0% {
			stroke: #45494a;
		}

		40% {
			stroke: #45494a;
		}

		66% {
			stroke: #45494a;
		}

		80%,
		90% {
			stroke: #45494a;
		}
	}

	body {
		background-color: #eee;
	}

	.showbox {
		width: 700px;
		height: 200px;
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 9999;
		/*设定这个view的margin-top的负值为自身的高度的一半,margin-left的值也是自身的宽度的一半的负值.*/
		/*宽为400,那么margin-top为-200px*/
		/*高为200那么margin-left为-100px;*/
		margin: -100px 0 0 -350px;
	}
</style>